<template>
  <div class="user-info">
    <div class="ui-top">
      <div class="ui-avatar">
        <div class="uia-touxiang">
          <img :src="userInfo.avatar" alt="" />
        </div>
        <div class="uia-wenben">
          <div class="uiaw-1">{{ userInfo.account }}</div>
          <div class="uiaw-2">
            <van-icon name="edit" />
          </div>
        </div>
      </div>
      <div class="ui-number">
        <van-row justify="space-around">
          <van-col span="6">
            <div class="uin-item">
              <div style="font-size: 24px; font-weight: bold">{{ userInfo.collectionNumber }}</div>
              <div>收藏数量</div>
            </div>
          </van-col>
          <van-col span="6"
            ><div class="uin-item">
              <div style="font-size: 24px; font-weight: bold">{{ userInfo.likeNumber }}</div>
              <div>关注数量</div>
            </div></van-col
          >
          <van-col span="6"
            ><div class="uin-item">
              <div style="font-size: 24px; font-weight: bold">{{ userInfo.score }}</div>
              <div>积分</div>
            </div></van-col
          >
          <van-col span="6"
            ><div class="uin-item">
              <div style="font-size: 24px; font-weight: bold">{{ userInfo.couponNumber }}</div>
              <div>优惠券</div>
            </div></van-col
          >
        </van-row>
      </div>
    </div>
    <div class="ui-doctor-status">
      <!-- 如果用了UI框架，那么就可以看一些组件上面的类名，有些时候可以直接用别人的类名 -->
      <!-- 2. van-cell-group--inset 这个样式不是我们写的，是我们从vant-cell单元格里面查看别人element属性得到， -->
      <div class="uids-main van-cell-group--inset">
        <div class="uidm-top">问诊中</div>
        <div class="uidm-bottom">
          <!-- class="van-swipe"  class="van-swipe-item" -->
          <van-swipe indicator-color="red">
            <van-swipe-item v-for="item in userInfo.consultationInfo" :key="item.id">
              <div class="uid-doctor-item">
                <div class="uid-doctor-item-left">
                  <img
                    :src="
                      item.avatar
                        ? item.avatar
                        : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faa3d2afa-b73e-45fe-b5f3-b7c2c8a92f77%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693983017&t=8cefcc865a0831b1e00f276102f29bcc'
                    "
                  />
                </div>
                <div class="uid-doctor-item-middle">
                  <div class="uid-middle-top">
                    <!-- 我们通过假数据写页面结构，每个字的长度 决定了盒子的宽度 -->
                    <!-- 请求来了真数据以后， 一定要保证 名称超过3个字就显示...， 科室超过了4个字也显示... -->
                    <span>{{ item.name }}</span>
                    <span>{{ item.depName }} | </span>
                    <span>{{ item.positionalTitles }}</span>
                  </div>
                  <div class="uid-middle-bottom">
                    <span>{{ item.gradeName }}</span>
                    <span>{{ item.hospitalName }}</span>
                  </div>
                </div>
                <div class="uid-doctor-item-right">
                  <van-button round>进入咨询</van-button>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <div class="ui-medicine">
      <div class="uim-main van-cell-group--inset">
        <div class="uie-top clearfix">
          <div class="uiet-left">药品订单</div>
          <div class="uiet-right">全部订单 ></div>
        </div>
        <div class="uie-bottom">
          <van-row justify="space-around">
            <van-col span="6" v-for="item in 4" :key="item">
              <div class="uin-item">
                <div style="font-size: 24px; font-weight: bold">
                  <van-badge
                    :show-zero="false"
                    :content="userInfo.orderInfo && userInfo.orderInfo.paidNumber"
                    v-if="item === 1"
                  >
                    <cp-icon name="user-paid"></cp-icon>
                  </van-badge>
                  <van-badge :show-zero="false" :content="userInfo.orderInfo?.receivedNumber" v-if="item === 2">
                    <cp-icon name="user-received"></cp-icon>
                  </van-badge>
                  <van-badge :show-zero="false" :content="userInfo.orderInfo?.shippedNumber" v-if="item === 3">
                    <cp-icon name="user-shipped"></cp-icon>
                  </van-badge>
                  <van-badge :show-zero="false" :content="userInfo.orderInfo?.finishedNumber" v-if="item === 4">
                    <cp-icon name="user-tool-01"></cp-icon>
                  </van-badge>
                </div>
                <div>代付款</div>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div>{{ $route.path }}</div>
    <div @click="$router.back()">2222, {{ x }}, {{ y }}</div>
    <div>
      <van-button @click="copyText">点击复制文本</van-button>
    </div>
    <div class="ui-tools">
      <div class="uit-main van-cell-group--inset">
        <div style="font-size: 18px; font-weight: bold">快捷工具</div>
        <van-cell-group inset>
          <van-cell is-link @click="goTo" v-for="(item, index) in toolList" :key="item.id">
            <template #title>
              <CpIcon :name="`user-tool-0${index + 1}`" />
              <span style="margin-left: 30px; font-size: 16px">{{ item.title }}</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<!-- name 有什么用：vue-tools调试使用， keep-alive里面includes，递归组件 -->
<script lang="ts">
export default {
  name: 'UserInfoCom'
}
</script>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPatientUserInfo } from '../../services/user'
// pnpm install @vueuse/core
import { useClipboard, useMouse, useStorage } from '@vueuse/core'
import { showToast } from 'vant'

const { copy, isSupported } = useClipboard() // 就和我们键盘按 ctrl+c一样

const copyText = () => {
  copy(document.querySelector('.uidm-top').innerHTML)
  showToast('复制成功')
}

const { x, y } = useMouse()

useStorage('hm-91', { hello: 'hi', greeting: 'Hello' })

// vue3里面 组合式setup写法，怎么给组件起名称？
// 第一： 再写一个script，用vue2 选项式写法，写个name
// 第二：下个插件，在setup 的script上面写个 name属性
const toolList = ref([
  { id: 1, title: '我的问诊', path: '', icon: '' },
  { id: 2, title: '我的处方', path: '', icon: '' },
  { id: 3, title: '家庭档案', path: '', icon: '' },
  { id: 4, title: '地址管理', path: '', icon: '' },
  { id: 5, title: '设置', path: '', icon: '' }
])

const route = useRoute()
const router = useRouter()

const goTo = () => {
  console.log(111, route)
  // this.$router.push('/user/patient')
  router.push('/user/patient')
}

// const userInfo = reactive({
//   value: null
// })
// ref的底层 就类似于 reactive， ref也是一个对象，底层对象里面有个value属性
const userInfo: any = ref({})

async function getUserInfo() {
  const res = await getPatientUserInfo()

  console.log(res.data)
  userInfo.value = res.data
}

getUserInfo()
</script>

<style lang="scss">
// 有些明知道vant的样式不好修改，那么就需要将样式写唯一， 再写一个style 不加scoped
// 不管任何的vatn-ui的样式 都可以去改， element-ui一模一样
.uidm-top {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.uid-doctor-item-right {
  // 为了避免后期因为深度选择器问题，修改不了
  // vant组件的样式，推荐大家将vant的样式修改
  // 放到不带scoped的style里面，控制好父类的唯一性就好
  .van-button {
    padding: 5px 10px;
    line-height: 18px;
    height: auto;
    color: var(--cp-primary);
    border-color: var(--cp-primary-light);
    background-color: var(--cp-primary-light);
  }
}
.uit-main {
  .van-cell {
    padding-left: 0;
    padding-right: 0;
  }
  .van-cell__title {
    font-size: 20px;
    position: relative;
    .cp-icon {
      position: absolute;
      top: 3px;
      left: 0;
    }
  }
}
</style>

<style lang="scss" scoped>
// https://lingdaima.com/jianbianse/
.user-info {
  background-color: #e6e5e5;
  padding-bottom: 50px;
  .ui-top {
    width: 100%;
    height: 240px;
    background: rgb(127, 213, 202);
    background: linear-gradient(180deg, rgba(127, 213, 202, 1) 14%, rgba(204, 229, 235, 1) 49%);
  }
  .ui-avatar {
    // background-color: aquamarine;
    padding-top: 50px;
    display: flex;
    padding-left: 25px;
    .uia-touxiang {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      // background: yellow;
      position: relative;
      img {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: -10px;
        left: 10px;
      }
    }
    .uia-wenben {
      padding-top: 10px;
      margin-left: 20px;
      .uiaw-1 {
        font-size: 20px;
        font-weight: 600;
      }
      // 样式穿透 -- 深度选择器
      // 有些样式是在 伪类before上面，这个写深度选择器的时候，就都试一遍，谁能用就用谁
      :deep() {
        .uiaw-2 .van-icon-edit {
          margin-top: 8px;
          font-size: 20px;
          color: var(--cp-primary);
        }
      }
    }
  }
  .ui-number {
    padding: 25px;
    .uin-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .ui-doctor-status {
    margin: 15px 0;
    .uids-main {
      padding: 15px;
      background-color: #fff;
    }
    .uidm-bottom {
      .van-swipe .van-swipe-item {
        // color: blue;
        font-size: 20px;
        // background-color: pink;
      }
    }
    .uid-doctor-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      .uid-doctor-item-left {
        // flex-basis 优先级比 width要搞，但是比 min-widt  max-width 优先级要小
        // width: 200px; // 只要下面写了flex-basis 这个width就不会生效
        flex: 0 0 60px;
        margin-right: 5px;
        // background-color: aquamarine;
        // border-radius: 30px;
        overflow: hidden;
        img {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 30px;
          margin: 0 auto;
        }
      }
      .uid-doctor-item-middle {
        // flex:  1 复合属性
        // flex-grow:  有剩余空间，是否自动扩大
        // flex-shrink： 空间如果不够了，是否自动缩小
        // flex-basis: 基准宽度，前面的两个参数如果都不是自动计算的，就以这个宽度为准
        // min-width: 120px  max-width: 200px
        flex: 1 1 0%;
        // background-color: rgb(65, 145, 119);
        .uid-middle-top {
          font-size: 12px;
          color: #ccc;
          // 下面这个宽度是我们 以iphone的375px为基准去写的，如果换成iphone 6 plus这个省略号怎么写，宽度给多少？
          width: 165px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          span:nth-child(1) {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            margin-right: 5px;
          }
        }
        .uid-middle-bottom {
          font-size: 12px;
          span:first-child {
            color: #fff;
            background-color: lightseagreen;
            padding: 2px 6px;
            border-radius: 4px;
          }
          span:nth-child(2) {
            margin-left: 8px;
            color: #969494;
          }
        }
      }
      .uid-doctor-item-right {
        flex: 0 0 80px;
        // background-color: rgb(83, 158, 216);
      }
    }
  }
  .ui-medicine {
    margin: 15px 0;
    .uim-main {
      padding: 15px;
      background-color: #fff;
      .uin-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .uie-top {
        margin-bottom: 15px;
        .uiet-left {
          float: left;
          font-size: 18px;
          font-weight: bold;
        }
        .uiet-right {
          float: right;
          font-size: 14px;
          color: #d8d4d4;
        }
      }
      // 浮动如果不清楚，就会造成高度塌陷问题
      // 清除浮动： 我一般用 clearfix 自己写个类，通过伪元素去 清除浮动，这种最方便
      // 还有比较简单的一种，就是通过 overflow:hidden; 触发生成一个BFC
      .clearfix::after,
      .clearfix::before {
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }
    }
  }
  .ui-tools {
    margin: 15px 0;
    .uit-main {
      padding: 15px;
      background-color: #fff;
    }
  }
}
</style>
